<!---->
<template>
  <ele-pro-table
    @expand-change="expandChange"
    :row-key='getRowKeys'
    :expand-row-keys="expands"
    ref="table"
    size="mini"
    :columns="columns"
    :datasource="datasource"
    :selection.sync="selection"
    :need-page="true"
    :hideOnSinglePage="false"
  >
    <!--头部按钮-->
    <template v-slot:toolbar>
        <el-button
          size="small"
          type="danger"
          icon="el-icon-delete"
          class="ele-btn-icon"
          @click="delCardAll">
          删除
        </el-button>
      <!--<el-button
        size="small"
        type="primary"
        icon="el-icon-delete"
        class="ele-btn-icon"
        @click="addCard">
        新增——（移动需删除）
      </el-button>-->
    </template>

    <!--展开行-->
    <template v-slot:expand="{ row }" >
      <el-table class="table-expand table-class" :data="tableData" style="z-index: 99;overflow-x: auto">
        <el-table-column  label="订单号" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="font-overflow">{{scope.row.businessOrderId}}</div>
          </template>
        </el-table-column>
        <!--产品付费类型 1:付费 2:试用 3：其他-->
        <el-table-column label="云存储状态" align="center">
          <template slot-scope="scope">
            <div class="font-overflow">{{scope.row.status==1 ? '待使用' : '使用中'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="用户激活状态" align="center">
          <template slot-scope="scope">
            <div class="font-overflow">{{scope.row.userActiveStatus==1 ? '激活状态' : '暂停状态'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="服务是否立即生效" align="center">
          <template slot-scope="scope">
            <div class="font-overflow">{{scope.row.effectImmediately==1 ? '立即生效' : '延迟生效'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="生效时间" align="center">
          <template slot-scope="scope">
            <div class="font-overflow">{{$sun.timestampToTime(scope.row.effectTime)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="过期时间" align="center">
          <template slot-scope="scope">
            <div class="font-overflow">{{$sun.timestampToTime(scope.row.expireTime)}}</div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--网络状态:1-在线 2-不在-->
    <template v-slot:network="{ row }">
      <div class="flex">
        <div :class="row.status==1 ?'staut-class':'leave'">{{row.status==1 ? '在线中' : '已离线'}}</div>
      </div>
    </template>
    <!--使用状态:1,空闲中 2,使用中 3.已到期 默认为1-->
    <template v-slot:useStauts="{ row }">
      <div :class="row.onState==1 ? 'blue' : row.onState==2 ? 'red' : 'grey'">
        {{row.onState==1 ? '空闲中' : row.onState==2 ? '使用中' : '已到期'}}
      </div>
    </template>
    <!--验证码-->
    <template v-slot:code="{ row }">
      <div class="width100 flex">
        <el-input
          class="input-class flex1" readonly :type="row.isVisble ? 'text' : 'password'" v-model="row.validateCode">
        </el-input>
        <img src="@/assets/passwordEye.png" style="width: 18px;height: 18px" @click="isVisbleClick(row)" />
      </div>
    </template>
    <!--操作-->
    <template v-slot:action="{ row }">
      <el-link
        type="danger"
        :underline="false"
        @click.stop="delSingle(row)"
      >
        删除
      </el-link>
    </template>
  </ele-pro-table>
</template>

<script>
  import {queryCameraList, delCamera, deviceInformation, queryDeviceInfo} from "@/api/lncomingManagement/carmeraAgent"
  import {dyCommentList} from "@/api/releaseManage/tiktok";
    export default {
        name: "table-list",
      props: {
        form:Object
      },
      data() {
        return {
          expands:[],
          getRowKeys (row) {
            return row.id
          },
          // 展开行 数据
          tableData:[],
          // ture_展示密码，false_不展示
          // isVisble:false,
          visible:false,
          // 表格选中数据
          selection: [],
          columns: [
            {
              columnKey: 'selection',
              type: 'selection',
              width: 45,
              align: 'center'
            },
            {
              width: 100,
              type: 'expand',
              columnKey: 'expand',
              align: 'center',
              fixed: 'left',
              label:'套餐列表',
              slot: 'expand'
            },
            {
              columnKey: 'index',
              type: 'index',
              width: 100,
              lable: 'sortValues',
              align: 'center',
              fixed: 'left',
              label: '排序'
            },
            {
              prop: 'displayName',
              label: '摄像头名称',
              width: 150,
              align: 'center',
              showOverflowTooltip: true,
            },
            {
              prop: 'oemCode',
              label: '所属代理',
              width: 150,
              align: 'center',
              showOverflowTooltip: true,
              slot: 'days',
            },
            {
              prop: 'merchantCode',
              label: '所属商家',
              width: 150,
              align: 'center',
              showOverflowTooltip: true,
            },
            {
              prop: 'status',  //  1-在线 2-不在
              label: '网络状态',
              width: 150,
              align: 'center',
              showOverflowTooltip: true,
              slot: 'network',
            },{
              prop: 'deviceSerial',
              label: '序列号',
              width: 150,
              align: 'center',
              showOverflowTooltip: true,
            },{
              prop: 'onState',  // 1,空闲中 2使用中 3.已到期 默认为1
              label: '使用状态',
              width: 150,
              align: 'center',
              showOverflowTooltip: true,
              slot: 'useStauts',
            },{
              prop: 'validateCode',
              label: '验证码',
              width: 160,
              align: 'center',
              showOverflowTooltip: true,
              slot: 'code',
            },
            {
              prop: 'createTime',
              label: '创建时间',
              width: 200,
              align: 'center',
              showOverflowTooltip: true,
            },
            {
              label: '操作',
              columnKey: 'action',
              align: 'center',
              width: 150,
              resizable: false,
              slot: 'action',
              hideInSetting: true,
              showOverflowTooltip: true,
              fixed: 'right'
            }
          ]
        };
      },
      methods: {
        // 折叠面板每次只能展开一行
        expandChange(row, expandedRows){
          var that = this
          if (expandedRows.length) {
            that.expands = []
            if (row) {
              that.expands.push(row.id)
              console.log("111111111",row)
              this.query(row)
            }
          } else {
            that.expands = []
          }
        },
        // 查询套餐列表
        query(row){
          queryDeviceInfo({
            deviceSerial:row.deviceSerial,
          })
            .then((data) => {
              this.tableData = data.data[0].cloudStorageServiceRespList ? data.data[0].cloudStorageServiceRespList : [];
            })
            .catch((e) => {
              this.$message.error(e);
            });
        },
        // 密码展示与隐藏
        isVisbleClick(row){
          // this.isVisble = this.isVisble==true ? false :true
          row.isVisble = row.isVisble != true
        },

        /* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
        async datasource({ page, limit, where, order }) {
          const result = await queryCameraList({ ...where, ...order, page, limit,...this.form,
            oemId:this.$store.state.user.info.oemId   //代理id
          });
          let arr = result.list
          for(let i = 0; i < arr.length; i++){
            arr[i].isVisble = false
          };
          return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
        },
        /* 表格数据源 */
        /*datasource({ page, limit, where, order }) {
          console.log("this.datasource测试111111111111111",this.datasource)
          return queryCameraList({ ...where, ...order, page, limit,...this.form,
              oemId:this.$store.state.user.info.oemId   //代理id
          });
        },*/
            /* 刷新表格 */
            reload(where) {
            this.$refs.table.reload({ page: 1, where: where });
          },
        // 需删除
        addCard(){
          deviceInformation({
            deviceSerial:"BA4850512",
            validateCode:"PVFDJC"
          })
            .then((data) => {
              this.reload();
            })
            .catch((e) => {
              this.$message.error(e.message);
            });
        },
        // /* 多个删除 */
        delCardAll(){
          if (!this.selection.length) {
            // 请选择需要操作的数据
            this.$message.error('请选择数据');
            return;
          }
          var ids=this.selection.map(item => {
            return item.id
          })
          this.delCard(ids)
        },
        /* 删除 */
        delSingle(row) {
          let ids=[]
          ids.push(row.id)
          console.log("ids====",ids)
          this.delCard(ids)
        },
        delCard(ids){
          this.$confirm('此操作将永久删除该摄像头, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delCamera({
              ids:ids
            })
              .then((data) => {
                this.reload()
                this.$message.success('删除成功!');
              })
              .catch((e) => {
                this.$message.error(e);
              });
          }).catch(() => {
            this.$message.info('已取消删除');
          });
        },
      }
    }
</script>


<style scoped lang="less">

  .input-css input[disabled] //disadled:后台不可接收此input传值
  {
    background:#dddddd; //为带有disabled的input框添加背景颜色
    pointer-events:none;//鼠标点击不可修改
  }
  .staut-class{
    padding: 2px;
    width: 50px;
    color: #31A952;
    background-color: #E4FFEC;
  }
  .leave{
    color: #999999;
    padding: 2px;
    width: 50px;
    background-color: #FFF5F4;
  }
</style>
